"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/10/30
 */
import * as React from 'react'

const {View, TouchableOpacity, Animated, FlatList} = require('react-native');
const {Tabs, List} = require('antd-mobile');
const {connect} = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
const {Actions} = require("react-native-router-flux");
import {commonProps, commonStyles} from "../../assets/styles/common";
import NavBackButton from "../../component/BackButton";
import {areaPickStyles} from "../../assets/styles/archive";
import {areaPickAreaList, areaPickTabs} from "../../assets/data";
import {TabItem} from "../../interface/index";
import MyText from "../../component/MyText";
import MyIcon from "../../component/icon";
import {SCREEN_WIDTH} from "../../constant";
import MyWebView from "../../component/MyWebView";
import {AuthPage} from "../../interface/router";


class AreaPickPage extends React.Component<AuthPage, any> {


    constructor(props: any, context: any) {
        super(props, context);
        this.state = {
            currentTab: 0,
            tabBarUnderlinePosition: new Animated.Value(0),


            //选中的区域id
            selectedAreaId: null
        }
    }


    componentDidMount(): void {
        this.props.dispatch({type: 'auth/fetchData', payload: {pi: 1, ps: 5}})

    }

    onMessage = (data) => {
        alert('定位成功')
    };
    onSelectArea = (selectArea: areaItem) => {
        this.props.dispatch({
            type: 'auth/changeSelectArea',
            payload: {selectArea, pi: 1, ps: 10, notFecthPost: true}
        });
        this.setState({selectedAreaId: selectArea.id});
    };
    goToTab = (currentTab) => {
        this.setState({currentTab});
        Animated.timing(
            this.state.tabBarUnderlinePosition, {
                toValue: currentTab * SCREEN_WIDTH / 2,
                duration: 300,
            }
        ).start();
    };


    renderTabBar = ({tabs}) => {
        return (
            <View style={commonStyles.tabBar}>
                {tabs.map((item: TabItem, index) => {
                    return (
                        <TouchableOpacity key={index} style={commonStyles.tabBarItem}
                                          onPress={this.goToTab.bind(this, index)}>
                            {item.icon ? <MyIcon name={item.icon}
                                                 color={this.state.currentTab === index ? '#DAC228' : '#AEADAD'}/> : null}
                            <MyText
                                style={this.state.currentTab === index ? commonStyles.tabBarItemTextActive : commonStyles.tabBarItemTextNormal}>{item.title}</MyText>
                        </TouchableOpacity>
                    )
                })}
                <Animated.View style={[commonStyles.tabBarUnderline, {left: this.state.tabBarUnderlinePosition}]}/>
            </View>
        )
    };


    renderListItem = (p) => {
        const index: number = p.index;
        const item: areaItem = p.item;
        return (
            <List.Item key={index}
                       extra={this.state.selectedAreaId === item.id ?
                           <MyIcon name={'icon-gou'} color='#DAC228'/> : null}
                       onClick={this.onSelectArea.bind(this, item)}
                       style={{backgroundColor: 'transparent'}}>
                <MyText style={{color: '#fff'}}>{item.name}</MyText>
                <List.Item.Brief><MyText style={{color: '#999999'}}>{item.description}</MyText></List.Item.Brief>
            </List.Item>
        )
    };
    renderContent = (props) => {
        return (
            this.state.currentTab === 0 ? (
                <FlatList
                    data={this.props.auth.areaList}
                    keyExtractor={(item, index) => item.id}
                    extraData={this.state}
                    renderItem={this.renderListItem}
                />
            ) : <MyWebView source={require('../../thirdParty/web/map.html')} onMessage={this.onMessage}/>
        )
    };

    render() {
        return (
            <View style={[commonStyles.container, areaPickStyles.container]}>
                <NavigationBar {...commonProps.navBar}
                               rightButton={{title: '下一步', tintColor: '#D8BB26', handler: Actions.focus}}
                               title={{title: '选择地点', tintColor: '#fff'}}
                />
                {/*<Tabs tabs={areaPickTabs}*/}
                {/*useOnPan={false}*/}
                {/*swipeable={false}*/}
                {/*tabBarUnderlineStyle={{height: 2, color: 'red'}}*/}
                {/*initialPage={0}*/}
                {/*page={this.state.currentTab}*/}
                {/*tabBarPosition="top"*/}
                {/*renderTabBar={this.renderTabBar}>*/}
                {/*{this.renderContent}*/}
                {/*</Tabs>*/}

                <FlatList
                    data={this.props.auth.areaList}
                    keyExtractor={(item, index) => item.id}
                    extraData={this.state}
                    renderItem={this.renderListItem}
                />
            </View>
        );
    }
}


export default connect(
    ({auth}) => ({auth})
)(AreaPickPage);